<template>
	<view class="register-wrap">
		<scroll-view scroll-y="true" class="register-container">
			<view class="flex flex-column flex-align-center flex-nowrap">
				<u--image
					:showLoading="true"
					src="../../static/loginLogo.png"
					width="80px"
					height="80px"
				></u--image>
				<text class="fs-56 fs-strong">社团系统</text>
				<view class="register-form">
					<u-row justify="space-between" customStyle="margin-bottom:50rpx">
						<strong class="fs-40">注册</strong>
						<text class="fs-40 fs-gold" @click="toLogin">返回登录</text>
					</u-row>
					<u--form :model="formData" :rules="rules" ref="ruleForm">
						<u-form-item prop="stu_code">
							<u--input
								placeholder="学号"
								placeholderStyle="color:#9e9e9e;font-size24px"
								prefixIcon="account-fill"
								prefixIconStyle="font-size: 24px;color: #333"
								class="register-input"
								v-model="formData.stu_code"
							></u--input>
						</u-form-item>
						<u-form-item prop="name">
							<u--input
								placeholder="姓名"
								placeholderStyle="color:#9e9e9e;font-size24px"
								prefixIcon="account"
								prefixIconStyle="font-size: 24px;color: #333"
								class="register-input"
								v-model="formData.name"
							></u--input>
						</u-form-item>
						<u-form-item prop="password">
							<u--input
								placeholder="密码"
								placeholderStyle="color:#9e9e9e;font-size24px"
								prefixIcon="lock-fill"
								prefixIconStyle="font-size: 24px;color: #333"
								class="register-input"
								v-model="formData.password"
								password
							></u--input>
						</u-form-item>
						<u-form-item prop="rePassword">
							<u--input
								placeholder="确认密码"
								placeholderStyle="color:#9e9e9e;font-size24px"
								prefixIcon="lock-fill"
								prefixIconStyle="font-size: 24px;color: #333"
								class="register-input"
								v-model="formData.rePassword"
								prop="rePassword"
								password
							></u--input>
						</u-form-item>
						<u-form-item @click="openPassProtect" prop="passProtect">
							<u--input
								placeholder="密保问题"
								disabled
								disabledColor="#ffffff"
								placeholderStyle="color:#9e9e9e;font-size24px"
								prefixIcon="question-circle-fill"
								prefixIconStyle="font-size: 24px;color: #333"
								class="register-input"
								v-model="formData.passProtect"
							></u--input>
						</u-form-item>
						<u-form-item prop="passProtectAnswer">
							<u--input
								placeholder="密保答案"
								placeholderStyle="color:#9e9e9e;font-size24px"
								prefixIcon="info-circle"
								prefixIconStyle="font-size: 24px;color: #333"
								class="register-input"
								v-model="formData.passProtectAnswer"
							></u--input>
						</u-form-item>
					</u--form>
					<u-button
						text="注册"
						class="register-btn"
						size="large"
						color="#c5a767"
						@click="register()"
						throttleTime="500"
					></u-button>
				</view>
			</view>
		</scroll-view>

		<u-action-sheet
			:show="showPassProtect"
			:actions="actions"
			title="请选择密保问题"
			@close="showPassProtect = false"
			@select="passProtectSelect"
		></u-action-sheet>
		<!-- 消息提示框 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'index',
	data() {
		return {
			showPassProtect: false,
			actions: [
				{
					name: '就读的小学'
				},
				{
					name: '生日'
				},
				{
					name: '家乡'
				}
			],
			formData: {
				stu_code: '', // 学号
				name: '',
				password: '',
				rePassword: '',
				passProtect: '', // 密保问题
				passProtectAnswer: '' // 密保答案
			},
			rules: {
				stu_code: [
					{
						type: 'string',
						required: true,
						message: '请填写学号',
						trigger: ['blur']
					},
					{
						pattern: /^20[0-9]{2}10[0-9]{2}[0-1][0-9]{2}/,
						message: '学号格式错误',
						trigger: ['change', 'blur']
					},
					{
						// 校验学号是否重复
						asyncValidator: (rule, value, callback) => {
							uni.$u.http.get('/user/stucode', { params: { stu_code: value } }).then(res => {
								// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
								if (res.data.code === 4001) {
									callback(new Error('学号重复'));
								} else {
									// 如果校验通过，也要执行callback()回调
									callback();
								}
							});
						},
						trigger: ['blur']
					}
				],
				name: [
					{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur']
					},
					{
						pattern: /^[\u4e00-\u9fa5]{2,4}$/,
						message: '姓名格式错误',
						trigger: ['change', 'blur']
					}
				],
				password: [
					{
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur']
					},
					{
						min: 6,
						message: '密码长度不能小于6',
						trigger: ['blur', 'change']
					}
				],
				rePassword: {
					asyncValidator: (rule, value, callback) => {
						if (value !== this.formData.password) {
							callback(new Error('两次密码不一致！'));
						} else {
							callback();
						}
					},
					trigger: ['blur', 'change']
				},
				passProtect: {
					type: 'string',
					require: true,
					message: '请选择密保问题',
					trigger: ['blur', 'change']
				},
				passProtectAnswer: {
					asyncValidator: (rule, value, callback) => {
						if (value) {
							callback();
						} else {
							callback(new Error('请输入密保答案'));
						}
					},
					trigger: ['blur']
				}
			}
		};
	},
	methods: {
		toLogin() {
			uni.redirectTo({
				url: '/pages/login/index'
			});
		},
		openPassProtect() {
			this.showPassProtect = true;
		},
		passProtectSelect(e) {
			this.formData.passProtect = e.name;
		},
		register() {
			this.$refs['ruleForm']
				.validate()
				.then(res => {
					uni.$u.http.post('/user/register', { ...this.formData }).then(res => {
						if (res.data.code === 200) {
							this.$refs.uToast.show({
								type: 'default',
								title: '注册成功',
								message: '注册成功',
								complete() {
									uni.redirectTo({
										url: '/pages/login/index'
									});
								}
							});
						}
					});
				})
				.catch(errors => {
					uni.$u.toast('校验失败');
				});
		}
	}
};
</script>

<style scoped lang="scss">
.register-wrap {
	background: #151819;
	height: 100vh;
}

.register-container {
	background-color: #000000;
	width: 100%;
	height: 100%;
	transform: scale(0.85);
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	padding: 30rpx 35rpx;
	color: #fff;

	.register-form {
		width: 100%;
		margin-top: 70rpx;

		.register-input {
			background-color: #fff;
			color: #333;
			height: 112rpx;
			width: 100%;
			margin-bottom: 10rpx;
		}

		.register-btn {
			border: 0;
			height: 100rpx;
			color: #fff;
			margin-top: 30rpx;
		}
	}
}
</style>
